<template>
	<view class="detail-card">
		<u-skeleton :loading="loading" animate rows="4" titleWidth="70%" titleHeight="30" rowsHeight="30">
			<!-- 培训基本信息区域 -->
			<view class="info-list">
				<view class="info-item title-item">
					<view class="item-icon title-icon"></view>
					<view class="item-content">
						<view class="item-label">培训标题</view>
						<view class="item-value">{{product_name}}</view>
					</view>
				</view>
				
				<view class="info-item status-item">
					<view class="item-icon status-icon"></view>
					<view class="item-content">
						<view class="item-label">签到状态</view>
						<view class="item-value status-value">
							<view class="status-dot" :class="{'status-signed': sign == 1, 'status-completed': sign == 2}"></view>
							<text>{{sign == 0 ? '未签到' : sign == 1 ? '已签到' : '已签退'}}</text>
						</view>
					</view>
				</view>
				
				<view class="info-item code-item">
					<view class="item-icon code-icon"></view>
					<view class="item-content">
						<view class="item-label">培训编号</view>
						<view class="item-value code-value">{{number}}</view>
					</view>
				</view>
				
				<view class="info-item type-item" v-if="product_category_name">
					<view class="item-icon type-icon"></view>
					<view class="item-content">
						<view class="item-label">培训类型</view>
						<view class="item-value type-value">{{product_category_name}}</view>
					</view>
				</view>
				
				<view class="info-item time-item">
					<view class="item-icon time-icon"></view>
					<view class="item-content">
						<view class="item-label">时间安排</view>
						<view class="item-value time-value">{{start_time}}</view>
					</view>
				</view>
				
				<view class="info-item location-item">
					<view class="item-icon location-icon"></view>
					<view class="item-content">
						<view class="item-label">培训地点</view>
						<view class="item-value location-value">{{teach_add}}</view>
					</view>
				</view>
				<view class="info-item title-item">
					<view class="item-icon content-icon"></view>
					<view class="item-content">
						<view class="item-label">培训内容</view>
						<view class="item-value content-value" v-if="teach_content">{{teach_content}}</view>
						<view class="item-value empty-value" v-else>暂无培训内容</view>
					</view>
				</view>
				<view class="info-item content-item" v-show="false">
					<view class="item-icon content-icon"></view>
					<view class="item-content">
						<view class="item-label">培训内容</view>
						<view class="item-value content-value" v-if="teach_content">{{teach_content}}</view>
						<view class="item-value empty-value" v-else>暂无培训内容</view>
					</view>
				</view>
			</view>
		</u-skeleton>
	</view>
</template>

<script>
	export default {
		name: 'TrainingDetailCard',
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			product_name: {
				type: String,
				default: ''
			},
			sign: {
				type: Number,
				default: 0
			},
			number: {
				type: String,
				default: ''
			},
			product_category_name: {
				type: String,
				default: ''
			},
			start_time: {
				type: String,
				default: ''
			},
			teach_add: {
				type: String,
				default: ''
			},
			teach_content: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style lang="scss">
.detail-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 10rpx 40rpx rgba(37, 104, 239, 0.05);
	margin-bottom: 30rpx;
	overflow: hidden;
	position: relative;
	backdrop-filter: blur(10rpx);
}

.detail-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6rpx;
	background: linear-gradient(90deg, #2979ff, #56b3ff);
	z-index: 2;
}

.info-list {
	margin-top: 24rpx;
	padding: 40rpx 60rpx 40rpx 50rpx;
	position: relative;
}

.info-item {
	display: flex;
	align-items: flex-start;
	padding: 30rpx 0;
	position: relative;
	margin-left: 30rpx;
	margin-right: 20rpx;
}

.info-item:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 64rpx;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(41, 121, 255, 0.1), transparent 80%);
}

.item-icon {
	width: 44rpx;
	height: 44rpx;
	margin-right: 20rpx;
	border-radius: 12rpx;
	position: relative;
	transition: all 0.3s;
}

.title-icon {
	background-color: rgba(0, 0, 0, 0.08);
}

.title-icon::before {
	content: '';
	position: absolute;
	width: 28rpx;
	height: 4rpx;
	background: #303133;
	top: 14rpx;
	left: 8rpx;
}

.title-icon::after {
	content: '';
	position: absolute;
	width: 18rpx;
	height: 4rpx;
	background: #303133;
	top: 24rpx;
	left: 8rpx;
}

.status-icon {
	background-color: rgba(144, 147, 153, 0.08);
}

.status-icon::before {
	content: '';
	position: absolute;
	width: 24rpx;
	height: 24rpx;
	border: 2px solid #909399;
	border-radius: 50%;
	top: 8rpx;
	left: 8rpx;
}

.status-icon::after {
	content: '';
	position: absolute;
	width: 8rpx;
	height: 10rpx;
	border-right: 2px solid #909399;
	border-bottom: 2px solid #909399;
	transform: rotate(45deg);
	top: 14rpx;
	left: 16rpx;
}

.code-icon {
	background-color: rgba(41, 121, 255, 0.08);
}

.type-icon {
	background-color: rgba(25, 190, 107, 0.08);
}

.time-icon {
	background-color: rgba(255, 153, 0, 0.08);
}

.location-icon {
	background-color: rgba(245, 108, 108, 0.08);
}

.content-icon {
	background-color: rgba(153, 119, 255, 0.08);
}

.content-icon::before, .content-icon::after {
	content: "";
	position: absolute;
	border-radius: 2rpx;
}

.content-icon::before {
	width: 24rpx;
	height: 18rpx;
	border: 2px solid #9977ff;
	top: 12rpx;
	left: 8rpx;
}

.content-icon::after {
	top: 18rpx;
	left: 13rpx;
	width: 14rpx;
	height: 6rpx;
	background-color: #9977ff;
}

.code-icon::before {
	content: '';
	position: absolute;
	width: 24rpx;
	height: 18rpx;
	border: 2px solid #2979ff;
	border-radius: 2rpx;
	top: 12rpx;
	left: 8rpx;
}

.code-icon::after {
	content: '';
	position: absolute;
	width: 16rpx;
	height: 2rpx;
	background: #2979ff;
	top: 18rpx;
	left: 12rpx;
	box-shadow: 0 5rpx 0 #2979ff, 0 10rpx 0 #2979ff;
}

.type-icon::before {
	content: '';
	position: absolute;
	width: 20rpx;
	height: 24rpx;
	border: 2px solid #19be6b;
	border-radius: 4rpx;
	top: 8rpx;
	left: 10rpx;
}

.type-icon::after {
	content: '';
	position: absolute;
	width: 12rpx;
	height: 2rpx;
	background: #19be6b;
	top: 14rpx;
	left: 14rpx;
	box-shadow: 0 6rpx 0 #19be6b, 0 12rpx 0 #19be6b;
}

.time-icon::before {
	content: '';
	position: absolute;
	width: 24rpx;
	height: 24rpx;
	border: 2px solid #ff9900;
	border-radius: 50%;
	top: 8rpx;
	left: 8rpx;
}

.time-icon::after {
	content: '';
	position: absolute;
	width: 8rpx;
	height: 2rpx;
	background: #ff9900;
	top: 20rpx;
	left: 20rpx;
	transform: rotate(45deg);
	box-shadow: 0 -8rpx 0 #ff9900;
}

.location-icon::before {
	content: '';
	position: absolute;
	width: 22rpx;
	height: 22rpx;
	border: 2px solid #f56c6c;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	top: 8rpx;
	left: 10rpx;
}

.location-icon::after {
	content: '';
	position: absolute;
	width: 6rpx;
	height: 6rpx;
	background: #ffffff;
	border-radius: 50%;
	top: 16rpx;
	left: 18rpx;
}

.item-content {
	flex: 1;
}

.item-label {
	font-size: 26rpx;
	color: #909399;
	margin-bottom: 12rpx;
	letter-spacing: 1rpx;
}

.item-value {
	font-size: 32rpx;
	color: #000000;
	font-weight: 500;
	word-break: break-all;
	line-height: 1.5;
	letter-spacing: 0.5rpx;
}

.title-value {
	font-size: 32rpx;
	font-weight: 500;
	color: #000000;
}

.status-value {
	display: flex;
	align-items: center;
}

.status-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background-color: #909399;
	margin-right: 10rpx;
	box-shadow: 0 0 0 4rpx rgba(144, 147, 153, 0.1);
}

.status-dot.status-signed {
	background-color: #2979ff;
	box-shadow: 0 0 0 4rpx rgba(41, 121, 255, 0.1);
}

.status-dot.status-completed {
	background-color: #19be6b;
	box-shadow: 0 0 0 4rpx rgba(25, 190, 107, 0.1);
}

.code-value {
	color: #2979ff;
}

.type-value {
	color: #19be6b;
}

.time-value {
	color: #ff9900;
}

.location-value {
	color: #f56c6c;
}

.content-value {
	color: #000000;
	font-size: 30rpx;
	line-height: 1.8;
	white-space: pre-wrap;
	letter-spacing: 0.5rpx;
	text-align: justify;
	font-weight: normal;
}

.empty-value {
	color: #c0c4cc;
	font-style: italic;
	font-weight: normal;
}
</style> 